<template>
    <div class="app-container">
        <div>
            <p class="dialogTitle title">当前地震事件:
                <span v-if="currentEvent">{{ currentEvent.eventName }}</span>
                <span v-else>请在地震事件管理中设置当前地震事件</span>
            </p>
        </div>
        <!-- tab -->
        <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
            <el-tab-pane label="灾情类型分布" name="first">
                <DamageReport
                    :allDataList="allDataList"
                    :allDataListType="allDataListType"
                    :clearLayerType="clearLayerType"
                />
                <!-- 数据图层显示 -->
                <div class="dataLayer">
                    <el-tree :data="dataLayer" show-checkbox @check-change="handleNodeClick" />
                </div>
            </el-tab-pane>
            <el-tab-pane label="灾情类型占比" name="second">
                <el-row :gutter="20">
                    <el-col :span="8">
                        <div class="cbt">
                            <h4>伤亡、埋压/被困</h4>
                            <div id="cbt-bar" style="width: 100%;height:420px;"></div>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="buildingCollapses">
                            <h4>房屋倒塌</h4>
                            <div id="buildingCollapses-pie" style="width: 100%;height:420px;"></div>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="collapse">
                            <h4>崩塌</h4>
                            <div id="collapse-pie" style="width: 100%;height:420px;"></div>
                        </div>
                    </el-col>
                </el-row>
                <el-row :gutter="20" style="margin-top:30px">
                    <el-col :span="8">
                        <div class="landslide">
                            <h4>滑坡</h4>
                            <div id="landslide-pie" style="width: 100%;height:420px;"></div>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="roadCongestion">
                            <h4>道路拥堵/中断</h4>
                            <div id="roadCongestion-pie" style="width: 100%;height:420px;"></div>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="fire">
                            <h4>火灾</h4>
                            <div id="fire-pie" style="width: 100%;height:420px;"></div>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="danger">
                            <h4>危险品泄露</h4>
                            <div id="danger-pie" style="width: 100%;height:420px;"></div>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="other">
                            <h4>其他</h4>
                            <div id="other-pie" style="width: 100%;height:420px;"></div>
                        </div>
                    </el-col>
                </el-row>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script setup name="damageReport">
import useEventStore from "@/store/modules/event";
const currentEvent = computed(() => useEventStore().currentEvent);
import { getProportion,queryAll } from "@/api/samplingPointData/damageReport.js"
import * as echarts from "echarts";
import DamageReport from '@/map/samplingPointData/damageReport/indexMap.vue'
import { ref } from "vue";
import { getDict } from "@/api/system/dict";

// tab切换
const activeName = ref("first");
const dataLayer = ref([])
function handleClick(tab) {
    activeName.value = tab.paneName;
    if (activeName.value === 'second') {
        nextTick(() => {
            onSearch()
        });
    }
}

let m_chartBar = null
let m_chartPie = null
let m_chartPie2 = null
let m_chartPie3 = null
let m_chartPie4 = null
let m_chartPie5 = null
let m_chartPie6 = null
let m_chartPie7 = null
//统计
const onSearch = () => {
    let query = {
        xsemId: currentEvent.value.id
    }
    getProportion(query).then((res) => {
        if (res.code === 200) {
            console.log(res)
            //伤亡、埋压/被困柱状图
            buildChartCbtBar(res.data.casualties)
            //房屋倒塌饼图
            buildChartBuildingCollapsesPie(res.data.houseCollapse)
            //崩塌饼图
            buildChartcollapsePie(res.data.collapse)
            //滑坡饼图
            buildChartLandSlidePie(res.data.landslide)
            //道路拥堵/中断饼图
            buildChartRoadCongestionPie(res.data.road)
            //火灾饼图
            buildChartFirePie(res.data.fire)
            //危险源饼图
            buildDangerPie(res.data.dangerousGoodsList)
            // 其他
            otherDangerPie(res.data.otherList)
        }
    }).catch(err => {
        console.log(err);
    }
    );
};

//伤亡、埋压/被困柱状图
const buildChartCbtBar = (data) => {
    const keys = data.y
    const barData = data.x
    if (!m_chartBar) {
        m_chartBar = echarts.init(document.getElementById('cbt-bar'));
    }
    const barOption = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            bottom: 10,
            left: 'center',
        },
        xAxis: {
            type: 'category',
            data: keys
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                type: 'bar',
                //具体数据
                data: barData,
                itemStyle: {
                    color: "#107ce5"
                },
                label: {
                    show: true,
                    position: 'top'
                }
            }
        ]
    }
    m_chartBar.clear()
    m_chartBar.setOption(barOption);
}

//房屋倒塌饼图
const buildChartBuildingCollapsesPie = (data) => {
    if (!m_chartPie) {
        m_chartPie = echarts.init(document.getElementById('buildingCollapses-pie'));
    }
    const pieOption = getPieOption(data)
    m_chartPie.clear()
    m_chartPie.setOption(pieOption);
}

// 崩塌饼图
const buildChartcollapsePie = (data) => {
    if (!m_chartPie2) {
        m_chartPie2 = echarts.init(document.getElementById('collapse-pie'));
    }
    const pieOption = getPieOption(data)
    m_chartPie2.clear()
    m_chartPie2.setOption(pieOption);
}

//滑坡饼图
const buildChartLandSlidePie = (data) => {
    if (!m_chartPie3) {
        m_chartPie3 = echarts.init(document.getElementById('landslide-pie'));
    }
    const pieOption = getPieOption(data)
    m_chartPie3.clear()
    m_chartPie3.setOption(pieOption);
}

//道路拥堵/中断饼图
const buildChartRoadCongestionPie = (data) => {
    if (!m_chartPie4) {
        m_chartPie4 = echarts.init(document.getElementById('roadCongestion-pie'));
    }
    const pieOption = getPieOption(data)
    m_chartPie4.clear()
    m_chartPie4.setOption(pieOption);
}

// 火灾饼图
const buildChartFirePie = (data) => {
    if (!m_chartPie5) {
        m_chartPie5 = echarts.init(document.getElementById('fire-pie'));
    }
    const pieOption = getPieOption(data)
    m_chartPie5.clear()
    m_chartPie5.setOption(pieOption);
}

// 危险品
const buildDangerPie = (data) => {
    if (!m_chartPie6) {
        m_chartPie6 = echarts.init(document.getElementById('danger-pie'));
    }
    const pieOption = getPieOption(data)
    m_chartPie6.clear()
    m_chartPie6.setOption(pieOption);
}
// 危险品
const otherDangerPie = (data) => {
    if (!m_chartPie7) {
        m_chartPie7 = echarts.init(document.getElementById('other-pie'));
    }
    const pieOption = getPieOption(data)
    m_chartPie7.clear()
    m_chartPie7.setOption(pieOption);
}

const allDataList = ref([])
const allDataListType = ref('')
const clearLayerType = ref('')
const handleNodeClick = (value,flag,zflag) => {
  let type = value.id
  if(flag) {
    clearLayerType.value = ''
    queryAll({xsemId: currentEvent.value.id,type:type}).then(res => {
        allDataList.value = res.data
        allDataListType.value = value.id
    })
  }else{
    clearLayerType.value = type
  }
}

//getPieOption
const getPieOption = (pieData) => {
    const pieOption = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            bottom: 10,
            left: 'center',

        },
        series: [
            {
                //name: '房屋倒塌',
                type: 'pie',
                radius: '50%',     //半径
                //具体数据
                data: pieData,
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },
                itemStyle: {
                    normal: {
                        color: function (colors) {
                            var colorList = [
                                '#5ad8a6',
                                '#5b8ff9',
                                '#9479c3',
                                '#f6bd16',
                                '#f9c956',
                                '#75bedc'
                            ];
                            return colorList[colors.dataIndex];
                        },
                        label: {
                            show: true,
                            //formatter: '{b} : {c} ({d}%)' //带当前图例名 + 百分比
                            formatter: '{d}%' //只要百分比
                        }
                    },
                }
            }
        ]
    }
    return pieOption
}
async function getDictData() {
	await getDict("zqlx").then(response => {
        let arr = []
        for(let i = 0;i< response.data.length;i++){
            arr.push({
                id: response.data[i].dictItemCode,
                label: response.data[i].dictItemName
            })
        }
        dataLayer.value = arr
        debugger
	});
}
onMounted(() => {
  getDictData();//初始化
})
</script>

<style scoped lang="scss">
.cbt,
.buildingCollapses,
.collapse,
.landslide,
.roadCongestion,
.fire ,
.danger,
.other{
    //background: #fff;
    //box-shadow: 0 0 15px #4986bf;
    border: 1px solid #ccc;
    border-radius: 8px;
    opacity: 1;

    h4 {
        font-size: 20px;
        color: #333;
        font-weight: bold;
        //font-family: Microsoft YaHei;
        border-bottom: 1px solid #f3f3f3;
        padding: 15px 0;
        margin: 0;
        cursor: pointer;

        /*CSS伪类用法*/
        //div:after,
        &:before {
            content: "";
            height: 22px;
            width: 7px;
            background: #107ce5;
            border-radius: 0 4px 4px 0;
            display: inline-block;
            margin-right: 15px;
            vertical-align: text-top;
        }

    }
}
.dataLayer {
  text-align: center;
  // width: 320px;
  position: absolute;
  top: 14px;
  // background: #001b43;
  background-color:rgba(228, 232, 237, 0.6)!important;
  .el-tree {
    margin-top: 10px;
    background: none;
    color:#000;
  }
}
</style>